<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<title>夺宝游戏</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font-family: Arial, "Microsoft YaHei";
		}
		
		ul,
		li {
			list-style: none;
		}
		
		body {
			height: 100vh;
			/*width: 100%;
			background: url(../images/takeGame/bj.jpg) no-repeat;
			background-size: 100% 100%;*/
		}
		#wrapper {
			background: url(../images/takeGame/bj.jpg) no-repeat;
			background-size: 100% 100%;
			overflow: scroll;
			height: 100%;
		}
		.v-middle {
			vertical-align: middle;
		}
		
		#header {
			background: #422143;
			padding: .4rem .4rem;
			font-size: 0;
			border-bottom: 1px solid #92338e;
		}
		
		#header .user {
			color: #f179f1;
			font-size: .7rem;
		}
		
		#header .section {
			font-size: .7rem;
			display: inline-block;
			background: #a415a9;
			color: white;
			width: 5.5rem;
			/*height: 1.25rem;*/
			/*line-height: 1.25rem;*/
			border-radius: .5rem;
			padding: .2rem .2rem;
			margin-left: 1.8rem;
			margin-right: .6rem;
		}
		
		.section img {
			width: 1rem;
			height: 1rem;
		}
		
		.exchange {
			margin-right: .3rem;
		}
		
		.publicBtn {
			width: 3rem;
			height: 1.25rem;
		}
		/* top two button */
		
		#topBtn {
			margin-top: .75rem;
		}
		
		#topBtn .old {
			margin-left: .5rem;
		}
		
		.explain {
			width: 4rem;
			height: 1.25rem;
			float: right;
			margin-right: .5rem;
		}
		/* 英雄榜heroesLis */
		
		#heroesLis {
			width: 94%;
			margin: 0 auto;
			border: 1px solid #852c87;
			border-radius: .5rem;
			background: #381b39;
			margin-top: .6rem;
			padding: 1vw;
		}
		
		.startText {
			font-size: 1.2rem;
			color: #f74cf7;
			text-align: center;
			padding: .4rem 0;
			border-bottom: 1px solid #c368c3;
		}
		
		.startText img {
			width: 5rem;
			height: 1.25rem;
			vertical-align: middle;
		}
		
		#heroesLis .content li {
			color: white;
			font-size: .7rem;
			text-align: center;
			padding: .3rem 0;
		}
		
		#heroesLis .content li span {
			color: #a840a8;
			margin: 0 .2rem;
		}
		/* 押注主内容区 */
		
		#contentWraper {
			background: #3d1e3e;
			width: 94%;
			margin: 0 auto;
		}
		
		#contentWraper li:hover {
			/*box-shadow: 0 0 .5rem #f74cf7;*/
		}
		
		.contentHeader {
			font-size: 0;
			color: #f94df9;
		}
		
		.contentHeader span {
			display: inline-block;
			text-align: center;
			width: 50%;
			font-size: .9rem;
			height: 1.7rem;
			line-height: 1.7rem;
		}
		
		.contentHeader .gaussNumber {
			background: #1a1419;
		}
		/* 猜大小内容区 */
		
		.guessBigWrapper,
		.guessNumberWrapper {
			margin: .2rem;
			padding-bottom: .5rem;
		}
		/* 共用 top、bottom */
		
		.guessNumberWrapper {
			display: none;
		}
		
		.publicTopBtm li {
			display: inline-block;
			border: 1px solid #6b276c;
			width: 46%;
			border-radius: .5rem;
			font-size: .7rem;
			color: #c349c4;
			padding: 2vw 1vw;
		}
		
		.publicTopBtm li span:first-child {
			border: 1px solid #a73aa7;
			border-radius: 50%;
			padding: .3rem .4rem;
			font-size: .9rem;
		}
		
		.publicTopBtm li span:last-child {
			margin-left: 3rem;
		}
		/* guessOther */
		
		.guessOther ul {
			display: flex;
			justify-content: space-between;
		}
		
		.guessOther li span:first-child {
			border: none
		}
		
		.guessOther li {
			width: auto;
			margin-top: .5rem;
		}
		
		.guessOther li span:last-child {
			margin-left: 1.25rem;
		}
		/* 猜单双内容区 */
		
		.guessOddEven ul {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			font-size: .7rem;
		}
		
		.guessOddEven li {
			display: flex;
			flex-direction: column;
			text-align: center;
			width: 15%;
			border: 1px solid #632463;
			color: #f24ef2;
			border-radius: .5rem;
			padding: .1rem .5rem;
			margin-top: .5rem;
		}
		
		/*#footer {
			display: flex;
			justify-content: space-between;
			width: 94%;
			margin: 0 auto;
			margin-bottom: 2vh;
			margin-top: 2vh;
		}
		
		#footer img {
			width: 3rem;
			height: 2rem;
		}*/
		
		.totalNumber {
			display: inline-block;
			background: #220f22;
			font-size: 0;
			border: 1px solid #b232a4;
			border-radius: .5rem;
		}
		
		.input-number {
			vertical-align: top;
			text-align: center;
			outline: none;
			background: #7a0975;
			border: none;
			color: #ff76ff;
		}
		
		.input-number,
		.input-number-decrement,
		.input-number-increment {
			width: 3rem;
			height: 2rem;
			user-select: none;
			font-size: .8rem;
		}
		
		.input-number-decrement,
		.input-number-increment {
			display: inline-block;
			line-height: 38px;
			color: #fff;
			text-align: center;
			font-weight: bold;
			cursor: pointer;
		}
		
		#wrap {
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(144, 144, 144, );
			width: 100%;
			height: 56vh;
			text-align: center;
			color: white;
			/*border-top: 1px solid red;*/
			padding-top: 50vh;
		}
		
		.guessBigSmall {
			padding-bottom: 2vh;
		}
		
		.guessBigSmall li {
			margin-top: 3vh;
		}

		/* 筹码大小选择 */
			
			#disGray {
				position: absolute;
				top: 6rem;
				left: 5%;
				width: 90%;
				margin: 0 auto;
				z-index: 10;
				display: none;
			}
			
			#disGray ul {
				text-align: center;
				padding: .2rem 4vw;
			}
			
			#disGray ul li img {
				width: 3rem;
			}
			
			#disGray .mengban {
				position: absolute;
				top: -0.5rem;
				left: 0;
				background: black;
				opacity: .6;
				width: 100%;
				height: 12rem;
				border-radius: 1rem;
				z-index: -1;
			}
			
			#disGray .disGrayBtn {
				background: #0deeed;
				border: none;
				color: #eaf8fa;
				width: 8rem;
				height: 1.8rem;
				text-align: center;
				border-radius: .5rem;
				font-size: .7rem;
				margin: .5rem auto;
				/*margin-top: 1rem;*/
				margin-left: 25vw;
				outline: none;
			}
			
			.close_p {
				text-align: center;
				font-size: 0;
			}
			
			.close {
				/*display: inline-block;*/
				/*text-align: center;*/
				color: #FFFFFF;
				font-size: .6rem;
				text-decoration: underline;
			}
	</style>

	<body>
		<div id="wrapper">
			<header id="header">
				<span class="user v-middle">会员:1234</span>
				<section class="section v-middle">
					<span>余额：￥100</span>
					<img class="v-middle" src="../images/takeGame/add.png" alt="加号" />
				</section>
				<img class="exchange publicBtn v-middle" src="../images/takeGame/dh.png" alt="兑换" />
				<a href="complaint.html">
					<img class="ts publicBtn v-middle" src="../images/takeGame/ts.png" alt="投诉" />
				</a>
			</header>
			<div id="topBtn">
				<img class="old publicBtn" src="../images/takeGame/wq.png" alt="往期" />
				<img class="explain" src="../images/takeGame/wf.png" alt="玩法说明" />
			</div>
			<!-- 夺宝英雄榜 -->
			<div id="heroesLis">
				<div class="startText">
					<img src="../images/takeGame/leftStat.png" />
					<span style="margin: 0 .4rem;">夺宝英雄榜</span>
					<img src="../images/takeGame/rightStart.png" />
				</div>
				<section class="content">
					<ul>
						<li>
							恭喜<span>28780</span>在<span>[财神夺宝]</span>中奖<span>19</span>
						</li>
						<li>
							恭喜<span>28780</span>在<span>[财神夺宝]</span>中奖<span>19</span>
						</li>
						<li>
							恭喜<span>28780</span>在<span>[财神夺宝]</span>中奖<span>19</span>
						</li>
						<li>
							恭喜<span>28780</span>在<span>[财神夺宝]</span>中奖<span>19</span>
						</li>
						<li>
							恭喜<span>28780</span>在<span>[财神夺宝]</span>中奖<span>19</span>
						</li>
					</ul>
				</section>
			</div>
			<!-- 猜大小、单双，猜数字 -->
			<div style="font-size: .7rem;color: white;border: none;" class="startText">
				<img src="../images/takeGame/leftStat.png" />
				<span style="margin: 0 .4rem;">本期请您开始投注</span>
				<img src="../images/takeGame/rightStart.png" />
			</div>
			<div id="contentWraper">
				<header class="contentHeader">
					<span>猜大小、单双</span>
					<span class="gaussNumber">数值场</span>
				</header>
				<!-- 猜大小内容 -->
				<section class="guessBigWrapper">
					<div class="guessBigSmall publicTopBtm">
						<ul>
							<li>
								<span>大</span>
								<span>1赔2</span>
							</li>
							<li>
								<span>小</span>
								<span>1赔2</span>
							</li>
							<li>
								<span>单</span>
								<span>1赔2</span>
							</li>
							<li>
								<span>双</span>
								<span>1赔2</span>
							</li>
						</ul>
					</div>
					<!--<div class="guessOddEven">
					<ul>
						<li>
							<span>单</span>
							<span>1赔1.9</span>
						</li>
						<li>
							<span>双</span>
							<span>1赔1.9</span>
						</li>
						<li>
							<span>大双</span>
							<span>1赔1.9</span>
						</li>
						<li>
							<span>大单</span>
							<span>1赔1.9</span>
						</li>
						<li>
							<span>小单</span>
							<span>1赔1.9</span>
						</li>
						<li>
							<span>小双</span>
							<span>1赔1.9</span>
						</li>
						<li>
							<span>极大</span>
							<span>1赔1.9</span>
						</li>
						<li>
							<span>极小</span>
							<span>1赔1.9</span>
						</li>
					</ul>
				</div>-->
					<!--<div class="guessOther publicTopBtm">
					<ul>
						<li>
							<span>组</span>
							<span>1赔2.5</span>
						</li>
						<li>
							<span>豹</span>
							<span>1赔60</span>
						</li>
						<li>
							<span>顺</span>
							<span>1赔60</span>
						</li>
					</ul>
				</div>-->
				</section>
				<!-- 猜数值内容 -->
				<section class="guessNumberWrapper">
					<div class="guessOddEven">
						<ul>
							<li>
								<span>0</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>1</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>2</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>3</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>4</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>5</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>6</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>7</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>8</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>9</span>
								<span>1赔10</span>
							</li>
							<li>
								<span>合</span>
								<span>1赔60</span>
							</li>
							<li>
								<span>顺</span>
								<span>1赔60</span>
							</li>
							<li>
								<span>豹</span>
								<span>1赔60</span>
							</li>
						</ul>
					</div>
				</section>
			</div>
			<!-- 下注 -->
			<!-- <div id="footer">
				<img class="footerBet" src="../images/takeGame/xz.png" alt="下注" />
				<div class="totalNumber">
					<span class="input-number-decrement">–</span>
					<input class="input-number" type="text" value="1" min="1">
					<span class="input-number-increment">+</span>
				</div>
				<img src="../images/takeGame/ks.png" alt="开始" />
			</div> -->
			<!--<div id="wrap">加载中...</div>-->
			<!-- 筹码框 -->
			<div id="disGray">
				<ul>
					<li class="imgs">
						<!-- <img num='10' src="__PUBLIC__/Home/images/sieveImg/10.png" alt="">
						<img num='20' src="__PUBLIC__/Home/images/sieveImg/20.png" alt="">
						<img num='50' src="__PUBLIC__/Home/images/sieveImg/50.png" alt="">
						<img num='100' src="__PUBLIC__/Home/images/sieveImg/100.png" alt="">
						<img num='300' src="__PUBLIC__/Home/images/sieveImg/300.png" alt="">
						<img num='500' src="__PUBLIC__/Home/images/sieveImg/500.png" alt="">
						<img num='1000' src="__PUBLIC__/Home/images/sieveImg/1000.png" alt="">
						<img num='2000' src="__PUBLIC__/Home/images/sieveImg/2000.png" alt=""> -->
						<img num='10' src="../images/sieveImg/10.png" alt="">
						<img num='20' src="../images/sieveImg/20.png" alt="">
						<img num='50' src="../images/sieveImg/50.png" alt="">
						<img num='100' src="../images/sieveImg/100.png" alt="">
						<img num='300' src="../images/sieveImg/300.png" alt="">
						<img num='500' src="../images/sieveImg/500.png" alt="">
						<img num='1000' src="../images/sieveImg/1000.png" alt="">
						<img num='2000' src="../images/sieveImg/2000.png" alt="">
					</li>
				</ul>
				<button class="disGrayBtn">请选择您的下注金额</button>
				<p class="close_p"><span class="close">关闭</span></p>
				<div class="mengban"></div>
			</div>
		</div>
	</body>
	<script src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		// 预加载，背景加载完毕
		//		var img=new Image();
		//		img.src = '../images/takeGame/bj.png';
		//		$('html').attr('background','rgba(0,0,0,0)')
		//		img.onload = function(){
		//			$('#wrap').css('display','none');
		//		};

		//点击筹码大小事件、bool防止弹出筹码框时点击
		var bool =true;
		for(var i = 0; i < $('#disGray li.imgs img').length; i++) {
			$('#disGray li img').eq(i).click(function() {
				//存储筹码大小 并关闭筹码框
				localStorage.setItem('chip', $(this).attr('num'));
				$('#disGray').slideUp();
				bool = true;
				// p();
				// 存储 本次结果
				var a, b;
				a = localStorage.getItem('guess_spot');
				b = localStorage.getItem('chip');
				console.log(b)
			    // addrecharge(b,a);
				// bool = true;
			})
		}
		//  猜单双、点击显示
		$('.guessBigSmall li').click(function () {
			if(bool == true){
				// 存储押注
				alert($(this).attr('num'))
				localStorage.setItem('guess_spot', $(this).attr('num'));
				$('#disGray').slideDown();
				bool = false;
			}
		})
		// 数值场 点击显示筹码框
		$('.guessOddEven li').click(function () {
			if(bool == true){
				alert($(this).attr('num'))
				localStorage.setItem('guess_spot', $(this).attr('num'));
				$('#disGray').slideDown();
				bool = false;
			}
		})
		// 关闭筹码框
		$('.close').click(function() {
			$('#disGray').slideUp()
			bool = true
		});


		// 设置动态fontSize
		!(function(doc, win) {
			var docEle = doc.documentElement,
				evt = "onorientationchange" in window ? "orientationchange" : "resize",
				fn = function() {
					var width = docEle.clientWidth;
					width && (docEle.style.fontSize = 20 * (width / 375) + "px");
				};
			win.addEventListener(evt, fn, false);
			doc.addEventListener("DOMContentLoaded", fn, false);
		}(document, window));

		// 数量加减
		(function() {

			window.inputNumber = function(el) {

				var min = el.attr('min') || false;
				var max = el.attr('max') || false;

				var els = {};

				els.dec = el.prev();
				els.inc = el.next();

				el.each(function() {
					init($(this));
				});

				function init(el) {

					els.dec.on('click', decrement);
					els.inc.on('click', increment);

					function decrement() {
						var value = el[0].value;
						value--;
						if(!min || value >= min) {
							el[0].value = value;
						}
					}

					function increment() {
						var value = el[0].value;
						value++;
						if(!max || value <= max) {
							el[0].value = value++;
						}
					}
				}
			}
		})();
		inputNumber($('.input-number'));

		// 类型切换 
		$('.contentHeader > span').click(function() {
			if(bool == true){
				for(var i = 0; i < 2; i++) {
					$('#contentWraper > section').eq(i).css('display', 'none');
					$('.contentHeader > span').eq(i).css('background', '#1a1419')
				}
				$(this).css('background', '#3d1e3e')
				$('#contentWraper > section').eq($(this).index()).css('display', 'block')
			}
		});
		for(var i = 0; i < $('#contentWraper li').length; i++) {
			$('#contentWraper li').eq(i).attr('num', i);
		}

		// var upper;
		// $('#contentWraper li').click(function() {
		// 	$('#contentWraper li').eq(upper).css('box-shadow', '0 0 0 #f74cf7');
		// 	$(this).css('box-shadow', '0 0 .5rem #f74cf7');
		// 	upper = $(this).attr('num');
		// });
	</script>

</html>